<template>
	<nt-container>
		
		<view class="form-container">
			<view class="form-item vertical">
				<view class="form-item__label">名称：</view>
				<view class="form-item__content">
					<u--input v-model="formData.money" placeholder="请输入名称"></u--input>
				</view>
			</view>
			<view class="form-item vertical">
				<view class="form-item__label">类型：</view>
				<view class="form-item__content" @tap="show = true">
					<u--input v-model="title" disabled placeholder="请选择类型"></u--input>
					<text class="iconfont">&#xe6bb;</text>
				</view>
			</view>
			<view class="form-item vertical">
				<view class="form-item__label">入库数量：</view>
				<view class="form-item__content">
					<u--input v-model="formData.money" placeholder="请输入入库数量"></u--input>
				</view>
			</view>
			<view class="form-item vertical">
				<view class="form-item__label">备注：</view>
				<view class="form-item__content">
					<u--textarea 
						v-model="formData.remarks" 
						placeholder="请填写备注" 
						height="150" 
						autoHeight
						maxlength="-1"
						:confirmType="null"
						:autoHeight="true"
					></u--textarea>
				</view>
			</view>
			<nt-button text="入库" @tap="submit"></nt-button>
			<u-picker :show="show" :columns="[typesList]" keyName="label" @cancel="show = false" @confirm="confirm" @close="show = false" closeOnClickOverlay></u-picker>
		</view>
	</nt-container>
</template>

<script>
import { getUserFareLogDetails, editUserFareLog, addUserFareLog } from "@/api"
export default {
	data(){
		return {
			show: false,
			formData: {
				remarks: "",
				money: "",
				type_name: ''
			},
			images: [],
			previewImage: [],
			typesList: [
				{ label: '羊城通', value: '羊城通' },
				{ label: '租电池', value: '租电池' },
				{ label: '其他', value: '其他' },
			],
			id: "",
			info: {},
			title: ''
		}
	},
	onLoad(options){
		if(options.id){
			this.id = options.id
			this.getDetail()
		}
	},
	methods: {
		submit(){
			if(!this.formData.type_name) return this.toast('请选择费用类型')
			if(!this.formData.money) return this.toast('请输入费用')
			if(!this.formData.remarks) return this.toast('请输入备注')
			if(this.images.length === 0) return this.toast('请上传图片')
			// this.id ? this.update() : this.add()
		},
		add(){
			addUserFareLog({
				images: this.images.map(item => item.url),
				...this.formData
			}).then(res => {
				if(res.code === 1){
					this.toast('添加成功')
					setTimeout(() => this.back(), 1000)
				}
			})
		},
		update(){
			console.log({
				id: this.id,
				images: this.images.map(item => item.url),
				...this.formData
			})
			editUserFareLog({
				id: this.id,
				images: this.images.map(item => item.url),
				...this.formData
			}).then(res => {
				if(res.code === 1){
					this.toast('修改成功')
					setTimeout(() => this.back(), 1000)
				}
			})
		},
		getDetail(){
			getUserFareLogDetails(this.id).then(res => {
				const { code, data } = res
				this.formData.remarks = data.remarks
				this.formData.money = data.money
				this.formData.type_name = data.type_name
				this.title = data.type_name
				this.previewImage = data.images
			})
		},
		confirm(e){
			console.log(e)
			this.formData.type_name = e.value[0].value
			this.title = e.value[0].value
			this.show = false
		},
		// 上传成功
		successUpload(e){
			this.images = e
		},
	}
}
</script>
<style scoped lang="scss">
.form{
	&-container{
		padding: 20rpx;
		box-sizing: border-box;
		background:#fff;
	}
	&-item{
		display:flex;
		margin-top: 20rpx;
		&.vertical{
			flex-direction: column;
		}
		&.horizontal{
			flex-direction: row;
			align-items: center;
		}
		&__label{
			font-size: 26rpx;
			color:#333;
			height: 80rpx;
			line-height: 80rpx;
			width: 140rpx;
			font-weight: bold;
		}
		&__content{
			flex: 1;
			position:relative;
			.iconfont{
				position:absolute;
				top: 50%;
				right: 20rpx;
				transform: translateY(-50%);
			}
			/deep/ .u-textarea{
				min-height: 225rpx;
				border-radius: 20rpx;
				padding: 10rpx;
				box-sizing: border-box;
				.uni-textarea-textarea{
					height: 100%
				}
				.uni-textarea-wrapper{
					min-height: 100%;
				}
				&.u-border{
					border-width: 1rpx ;
					border-style: solid;
					border-color: #F8D4B9 !important;
				}
			}
			/deep/ .u-input{
				box-sizing: border-box;
				
			}
		}
	}
}
/deep/ .button-container{
	margin-top: 30rpx;
}
.form-item__content {
	/deep/.u-input{
		background: rgb(245, 247, 250)
	}
}

</style>